<template>
    <n-space v-for="(weather,index) in weatherList" justify="space-between" align="center" class=" border-b pt-2 border-slate-300 weather-line">
			  <div class="icon-container"  v-bind:style="{background:getWeatherColor(weather.dayweather)}">
					<Icon style="font-size: 17px;color:azure" :icon="getWeatherIcon(weather.dayweather)" />
				</div>
        <div>{{ weather.date }}</div>
        <div>{{ index == 0?"今天": index == 1?"明天": formatterWeek(weather.week) }}</div>
        <div>
            {{ weather.dayweather }}
        </div>
        <div>
            {{ weather.nighttemp }}°
            -
            {{ weather.daytemp }}°
        </div>
        <div>
            {{ weather.daywind }}风
        </div>
        <div>
            {{ weather.daypower }}级
        </div>
    </n-space>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getWeatherByGd } from "~/src/service/api/workbench/weatcher";
import { Icon } from '@iconify/vue';
const weatherList = ref()
const weaterIcon = [
    {
        label: "mdi:weather-partly-cloudy",
        value: "mdi:weather-partly-cloudy",
        color: "#eccc68",
        keyWord: "晴间多云",
    },
    { label: "mdi:weather-cloudy", value: "mdi:weather-cloudy", color: "#a4b0be", keyWord: "云" },
    { label: "mdi:weather-sunny", value: "mdi:weather-sunny", color: "#ffa502", keyWord: "晴" },
    { label: "mdi:weather-rainy", value: "mdi:weather-rainy", color: "#70a1ff", keyWord: "小雨" },
    { label: "typcn:weather-shower", value: "typcn:weather-shower", color: "#1e90ff", keyWord: "中雨" },
    { label: "mdi:weather-pouring", value: "mdi:weather-pouring", color: "#5352ed", keyWord: "雨" },
    { label: "mdi:weather-windy", value: "mdi:weather-windy", color: "#7bed9f", keyWord: "风" },
    { label: "mdi:weather-snowy", value: "mdi:weather-snowy", color: "#ced6e0", keyWord: "雪" },
    { label: "mdi:weather-lightning", value: "mdi:weather-lightning", color: "#ff6348", keyWord: "雷" },
]
async function getWeather() {
    await getWeatherByGd().then((res) => {
        weatherList.value = JSON.parse(res.data).forecasts[0].casts;
        // getWeatherIcon(weather.value?.weather);
        // getColorByTemperature(weather.value?.temperature);
    });
}
function formatterWeek(val:any){
    switch(val){
        case "1":
            return "星期一"
        case "2":
            return "星期二"
        case "3":
            return "星期三"
        case "4":
            return "星期四"
        case "5":
            return "星期五"
        case "6":
            return "星期六"
        case "7":
            return "星期天"
    }
}

function getWeatherIcon(weatherStr: any) {
    //搜索关键字
    let wertherIcons = weaterIcon;
    for (let i = 0; weatherStr && i < wertherIcons.length; i++) {
        const item = wertherIcons[i];
        if (weatherStr.indexOf(item.keyWord) > -1) {
            return item.value;
        }
    }
    return "mdi:weather-cloudy"
}
function getWeatherColor(weatherStr: string){
	    //搜索关键字
			let wertherIcons = weaterIcon;
    for (let i = 0; weatherStr && i < wertherIcons.length; i++) {
        const item = wertherIcons[i];
        if (weatherStr.indexOf(item.keyWord) > -1) {
            return item.color;
        }
    }
    return "#2ed573";
}

onMounted(() => {
    getWeather();
})
</script>
<style scoped>
.icon-container{
	width: 40px;
	height: 40px;
	min-width: none;
	margin: 1rem 0;
	background: #2ed573;
	border-radius: .5rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
